<template>
  <van-tabs v-model:active="active">
    <van-tab v-for="itme in daohang" :key="itme" :title="itme">
      <div style="background-color: #f7f7f7" v-if="active==1">
        <br><br>

        <van-row v-for="(item,key) in VideoList" :key="key">
          <div style="background-color: #ffffff;border-radius: 30px;">
            <van-row>
              <van-col span="4">
                <van-image
                    round
                    width="5rem"
                    height="5rem"
                    :src="item.user.headimg"
                />
              </van-col>
              &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
              <van-col span="16">
                <br>
                {{ item.user.username }}
                <br>
                {{ dateFormat(item.addtime) }}
              </van-col>
            </van-row>
            <van-row>
              <van-col span="1"></van-col>
              <van-col span="11">
                <div class="video-info">
                  <span>{{ item.title }}</span>
                  <!--              <br>-->
                </div>
              </van-col>
              <van-col span="10">
                <div class="video-thumbnail" @click="goToVideoDetail(item)">
                  <!--              <br>-->
                  <video controls width="150" height="90" ref="videoRef" style="right: 50px">
                    <source src="http://localhost:8000/upload/video/kunkun.mp4" type="video/mp4">
                    您的浏览器不支持 HTML5 video 标签。
                  </video>
                  <!--              <span class="video-duration">{{ video.duration }}</span>-->
                </div>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="8">
                &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                分享
              </van-col>
              <van-col span="8">
                <van-icon name="chat-o" size="20px"/>
                665
              </van-col>
              <van-col span="8">
                <van-icon name="thumb-circle-o" size="20px"/>
                318
              </van-col>
            </van-row>
          </div>
          <br><br>
        </van-row>
      </div>
    </van-tab>
  </van-tabs>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";

const active = ref(1)
const daohang = ref([
  "关注",
  "推荐",
  "热榜",
  "视频",
  "健康",
  "科技",
  "图片"
])
let VideoList = ref([])
const finall = () => {
  axios.get(`user/videofindall/`).then(res => {
    VideoList.value = res.data.data
  })
}
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}
onMounted(() => {
  finall()
})
</script>

<style scoped>

</style>
